<template>
	<!-- 头像修改页面 -->
	<view class="head">
		<uni-forms>
		<text class="text1">请选择头像</text>
		<!-- <input type="file" ref="fileInput" @input="handleFileChange"> -->
		<uni-file-picker limit="1" :imageStyles="imageStyles" 
		@success="success"
		file-mediatype="image" class="avatar" 
		@select="uploadAvatar"
		>
		<!-- <input type="file" id="file-input" /> -->
		</uni-file-picker>		
		</uni-forms>
		<button @click="submit" class="button">Submit</button>
		
	</view>
</template>

<script>
	import axios from 'axios'
	import http from '@/pages/utils/request.js'
	import {useUserInfoStore} from '@/pages/stores/userInfo.js'
	const useStore = useUserInfoStore()

	export default {
		data() {
			return {
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						radius: '50%',
						width:'2rpx',
						style:'solid',
						color:'#b8860b'
					},
					
				},
				data:[],
			}
		},
		methods: {
			handleFileChange(event) {
				console.log("hhhhhh")
				const file = event.target.files;
				const formData = new FormData();
				formData.append('file', file);
				formData.append('phone',useStore.phone);
				console.log(useStore.phone);
				http.post("/user/updateAvatar",formData, {'Content-Type': 'application/x-www-form-urlencoded' }).then(res=>{
					console.log(res)
				})
			},
			success(e){
			 console.log(e,"e");	
			},
			handleCLick() {
				var form = document.getElementById("uploadForm");
				// 创建一个FormData对象，用于存储表单数据
				var formData = new FormData(form);
				console.log(formData);
			},
			uploadAvatar(en) {
				console.log(en,"en");
				// const uploadTask = uni.uploadFile({
				//     url: 'http://localhost:8080/user/updateAvatar', // 替换为实际的后端接口地址
				//     filePath: en.tempFilePaths[0],
				//     name: 'file', // 后端接口期望的字段名，可能需要与后端约定
				//     formData: {}, // 如果有额外的表单数据需要一起发送，可以在这里添加
				//     header: {
				//       'Content-Type': 'multipart/form-data', // 默认值，一般不需要手动设置
				//       // 其他自定义请求头（如有）
				//     },
				//     success: function(uploadRes) {
				//       const response = uploadRes.data;
				//       if (response.success) {
				//         console.log('Avatar uploaded successfully:', response.data);
				//         // 更新用户信息或显示成功提示
				//       } else {
				//         console.error('Failed to upload avatar:', response.message);
				//       }
				//     },
				//     fail: function(uploadErr) {
				//       console.error('Error uploading avatar:', uploadErr);
				//     },
				//     progress: function(uploadProgress) {
				//       console.log('Upload progress:', uploadProgress.progress);
				//       // 更新上传进度条（如有）
				//     }
				//   });
				// 获取JSON对象中的头像图片URL
				let newen=JSON.parse(JSON.stringify(en))
				console.log(newen,"new");
				axios({
				   method: 'post',
				   url: 'http://geek.itheima.net/v1_0/upload',
				   image:en
				})
				.then(function (response) {
				   console.log(JSON.stringify(response.data));
				})
				.catch(function (error) {
				   console.log(error);
				});
				}
				}
	}
</script>

<style scoped>
	.head{
		width: 750rpx;
		height: 250rpx;
		/* height: 700rpx; */
		background-color: beige;
		color: darkgoldenrod;
		text-align: center;
	}
		
	.avatar {
		width: 25%;
		margin: auto;
	}
	#file-input{
		display: none;
	}
</style>